<template>
    <Modal :title="modalTitle" v-model="isModalOpen" :mask-closable="false" :width="800"
           @on-visible-change="changeModalState" footer-hide>
        <div class="itemModal">
            <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="100">
                <Row>
                    <Col span="12">
                        <FormItem label="名称" prop="elementName">
                            <!-- <Input v-model="formValidate.elementName" placeholder /> -->
                            <Select v-model="formValidate.elementName" placeholder>
                                <Option v-for="(item,index) in dataDict.channelGradeElementDict" :key="index"
                                        :value="item.value">{{ item.title }}
                                </Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col span="12">
                        <FormItem label="指标种类" prop="elementEditType">
                            <Select v-model="formValidate.elementEditType" placeholder>
                                <Option v-for="(item,index) in dataDict.gradeModelElementTypeDict" :key="index"
                                        :value="item.value">{{ item.title }}
                                </Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col span="12">
                        <FormItem label="权重(%)" prop="elementWeight" style="width: 200px" >
                            <!-- <Input v-model="formValidate.elementWeight" placeholder /> -->
                            <InputNumber :max="100" :min="1" v-model="formValidate.elementWeight"
                                         style="width:100%"></InputNumber>
                        </FormItem>
                    </Col>
                    <Col span="12">
                        <FormItem label="数据字典" prop="elementEditSrc"
                                  :rules="formValidate.elementEditType ==='0' ? ruleDictMust : ruleDict">
                            <!-- TODO: 下拉分页 组件 -->
                            <Select v-model="formValidate.elementEditSrc"
                                    :disabled="formValidate.elementEditType !=='0'" placeholder>
                                <Option
                                    v-for="(item,index) in allDictList"
                                    v-show="index>= pageData.begin && index < pageData.end"
                                    :key="index"
                                    :value="item.value"
                                >{{ item.title }}
                                </Option>
                                <Page
                                    v-if="allDictList.length > 0"
                                    :total="pageData.total"
                                    @on-change="changePage"
                                    style="text-align: center;"
                                    simple
                                />
                            </Select>
                        </FormItem>
                    </Col>
                    <Col span="12">
                        <FormItem label="指标使用方式" prop="elementUse">
                            <Select v-model="formValidate.elementUse" placeholder>
                                <Option v-for="(item,index) in dataDict.elementUseDict" :key="index"
                                        :value="item.value">{{ item.title }}
                                </Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col span="12">
                        <FormItem label="数据来源" prop="dscode">
                            <Select v-model="formValidate.dscode" placeholder>
                                <Option v-for="(item,index) in dataDict.gradeDataSourceDict" :key="index"
                                        :value="item.value">
                                    {{ item.title }}
                                </Option>
                            </Select>
                        </FormItem>
                    </Col>

                    <Col span="12">
                        <FormItem label="指标得分下限" prop="elementMin">
                            <Input v-model="formValidate.elementMin" placeholder/>
                        </FormItem>
                    </Col>

                    <Col span="12">
                        <FormItem label="指标得分上限" prop="elementMax">
                            <Input v-model="formValidate.elementMax" placeholder/>
                        </FormItem>
                    </Col>
                    <Col span="12">
                        <FormItem label="指标是否忽略" prop="elementIgnore">
                            <Select v-model="formValidate.elementIgnore" placeholder>
                                <Option v-for="(item,index) in dataDict.elementIgnoreDict" :key="index"
                                        :value="item.value">{{ item.title }}
                                </Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col span="12">
                        <FormItem label="满意值" prop="elementPlan">
                            <Input v-model="formValidate.elementPlan" placeholder/>
                        </FormItem>
                    </Col>
                    <Col span="12">
                        <FormItem label="不允许值" prop="elementStand">
                            <Input v-model="formValidate.elementStand" placeholder/>
                        </FormItem>
                    </Col>
                    <!--                    <Col span="12">-->
                    <!--                        <FormItem label="时间维度" prop="timeDimension">-->
                    <!--                            &lt;!&ndash; <Input v-model="formValidate.timeDimension" placeholder /> &ndash;&gt;-->
                    <!--                            <Select v-model="formValidate.timeDimension" placeholder>-->
                    <!--                                <Option v-for="(item,index) in dataDict.timeDimensionDict" :key="index" :value="item.value">{{item.title}}</Option>-->
                    <!--                            </Select>-->
                    <!--                        </FormItem>-->
                    <!--                    </Col>-->

                    <Col span="24">
                        <div class="text-center contract-close-btns">
                            <Button type="primary" @click="handleSubmit('formValidate')">保存</Button>
                            <Button type="primary" @click="changeModalState(false)">关闭</Button>
                        </div>
                    </Col>
                </Row>
            </Form>
        </div>
    </Modal>
</template>

<script>

import {getTitleFromDataDict} from "_p/afs-channel/assets/js/utils.js";

import {getDataDicType} from "_p/afs-channel/api/grade-model"

export default {
    //新增 指标详情 弹窗
    name: "IndicatorDetailsModal",
    components: {},
    props: {
        dataDict: {
            type: Object
        },
        modal: {
            type: Boolean,
            required: true
        },
        modalTitle: {
            type: String,
            default: "新增指标详情"
        },
        getDataFn: {
            type: Function,
            required: true
        },
        modalData: {
            type: Object
        },
        modelCode: {
            type: String,
            required: true
        }
    },
    data() {
        return {
            isModalOpen: this.modal,
            loading: false,
            formValidate: {},
            allDictList: [], // 数据字典
            pageData: {}, // 数据字典 下拉分页
            ruleValidate: {
                elementName: [{required: true, message: '请输入名称', trigger: 'change'}],
                elementEditType: [{required: true, message: '请选择模型类型', trigger: 'change'}],
                elementWeight: [{required: true, type: 'number', message: '请输入权重', trigger: 'change'}],
                dscode: [{required: true, message: '请选择数据来源', trigger: 'change'}],
            },
            ruleDictMust: [
                {required: true, message: '请选择数据字典值', trigger: 'change'}
            ],
            ruleDict: [
                {required: false}
            ]
        };
    },
    watch: {
        modal: function (newVal) {
            if (newVal) {
                this.formValidate = Object.assign({}, this.formValidate, this.modalData)
                console.log(this.formValidate);
            } else {
                this.formValidate = {}
            }
            this.isModalOpen = newVal;
        }
    },
    mounted() {
        this.init()
    },
    methods: {
        init() {
            this.getDataDicType()
        },
        save(data) {
            let getDataFn = this.getDataFn;
            if (getDataFn && typeof getDataFn === "function") {
                getDataFn(Object.assign({}, data, {modelCode: this.modelCode})).then(res => {
                    this.loading = false;
                    if (res.code === "0000") {
                        this.$Message.success(res.data)
                        this.$emit("closeModal", true)
                    }
                }).catch(e => {
                    console.log(e);
                    this.loading = false;
                });
            }
        },
        // 提交
        handleSubmit(name) {
            if (this.loading) return;
            this.$refs[name].validate(valid => {
                if (valid) {
                    this.loading = true;
                    this.save(this.formValidate);
                }
            });
        },

        //  弹窗切换
        changeModalState(bool) {
            if (!bool) this.$emit("closeModal");
        },
        getTitle(type, val) {
            let data = this.dataDict[type + "Dict"] || [];
            return getTitleFromDataDict(data, val);
        },
        // 数据字典分页
        getDataDicType() {
            getDataDicType().then(res => {
                if (res.code === "0000" && res.data) {
                    this.allDictList = res.data;
                    this.pageData = {
                        // pageNumber: 1,
                        // pageSize: 10,
                        total: res.data.length,
                        begin: 0,
                        end: 10
                    }
                }
            })
        },
        changePage(val) {
            let begin = (val - 1) * 10,
                end = val * 10;
            this.pageData = Object.assign({}, this.pageData, {begin, end})
            // console.log(this.pageData, "pageData", this.formValidate.elementEditSrc);
        },
    }
};
</script>
<style scoped lang="less">
</style>
